<template>
  <el-popover
    trigger="click"
    placement="right"
    :width="props.width"
    :height="400"
    v-model:visible="visible"
  >
    <template #reference>
      <el-button type="primary">{{props.name}}</el-button>
    </template>
    <el-tabs>
      <el-tab-pane v-for="tab in iconList" :key="tab.label" :label="tab.label" style="height:300px;overflow-y:auto">
        <el-icon
          :size="22"
          :key="item"
          :class="props.select === item?'star-icon-select':''"
          @click="setIcon(item)"
          v-for="item in tab.icons"
        >
          <component :is="item" />
        </el-icon>
      </el-tab-pane>
    </el-tabs>
  </el-popover>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const props = defineProps({
  width: {
    type: Number,
    default: 410
  },
  name: {
    type: String,
    default: '选择图标'
  },
  select: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['selectIcon'])

const iconList = [
  {
    label: '系统',
    icons: ['Plus', 'Minus', 'CirclePlus', 'Search', 'Female', 'Male', 'Aim', 'House', 'FullScreen', 'Loading',
      'Link', 'Service', 'Pointer', 'Star', 'Notification', 'Connection', 'ChatDotRound', 'Setting', 'Clock',
      'Position', 'Discount', 'Odometer', 'ChatSquare', 'ChatLineRound', 'ChatDotSquare', 'View', 'Hide',
      'Unlock', 'Lock', 'RefreshRight', 'RefreshLeft', 'Refresh', 'Bell', 'MuteNotification', 'User', 'Check',
      'CircleCheck', 'Warning', 'CircleClose', 'Close', 'PieChart', 'More', 'Compass', 'Filter', 'Switch', 'Select',
      'SemiSelect', 'CloseBold', 'EditPen', 'Edit', 'Message', 'MessageBox', 'TurnOff', 'Finished', 'Delete',
      'Crop', 'SwitchButton', 'Operation', 'Open', 'Remove', 'ZoomOut', 'ZoomIn', 'InfoFilled', 'CircleCheckFilled',
      'SuccessFilled', 'WarningFilled', 'CircleCloseFilled', 'QuestionFilled', 'WarnTriangleFilled', 'UserFilled',
      'MoreFilled', 'Tools', 'HomeFilled', 'Menu', 'UploadFilled', 'Avatar', 'HelpFilled', 'Share', 'StarFilled',
      'Comment', 'Histogram', 'Grid', 'Promotion', 'DeleteFilled', 'RemoveFilled', 'CirclePlusFilled']
  },
  {
    label: '项目',
    icons: ['Printer', 'Calendar', 'CreditCard', 'Box', 'Money', 'Refrigerator', 'Cpu',
      'Football', 'Brush', 'Suitcase', 'SuitcaseLine', 'Umbrella', 'AlarmClock', 'Medal',
      'GoldMedal', 'Present', 'Mouse', 'Watch', 'QuartzWatch', 'Magnet', 'Help',
      'Soccer', 'ToiletPaper', 'ReadingLamp', 'Paperclip', 'MagicStick', 'Basketball',
      'Coin', 'Goods', 'Sell', 'SoldOut', 'Key', 'ShoppingCart', 'ShoppingCartFull',
      'ShoppingTrolley', 'Phone', 'Scissor', 'Handbag', 'ShoppingBag', 'Trophy', 'TrophyBase',
      'Stopwatch', 'Timer', 'CollectionTag', 'TakeawayBox', 'PriceTag', 'Wallet', 'Opportunity',
      'PhoneFilled', 'WalletFilled', 'GoodsFilled', 'Flag', 'BrushFilled', 'Briefcase', 'Stamp']
  },
  {
    label: '文件',
    icons: ['DocumentAdd', 'Document', 'Notebook', 'Tickets', 'Memo', 'Collection', 'Postcard',
      'ScaleToOriginal', 'SetUp', 'DocumentDelete', 'DocumentChecked', 'DataBoard', 'DataAnalysis', 'CopyDocument',
      'FolderChecked', 'Files', 'Folder', 'FolderDelete', 'FolderRemove', 'FolderOpened', 'DocumentCopy',
      'DocumentRemove', 'FolderAdd', 'FirstAidKit', 'Reading', 'DataLine', 'Management', 'Checked',
      'Ticket', 'Failed', 'TrendCharts', 'List']
  },
  {
    label: '媒体',
    icons: ['Microphone', 'Mute', 'Mic', 'VideoPause', 'VideoCamera', 'VideoPlay', 'Headset',
      'Monitor', 'Film', 'Camera', 'Picture', 'PictureRounded', 'Iphone', 'Cellphone',
      'VideoCameraFilled', 'PictureFilled', 'Platform', 'CameraFilled', 'BellFilled']
  },
  {
    label: '箭头',
    icons: ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeftBold', 'ArrowUpBold', 'ArrowRightBold',
      'ArrowDownBold', 'DArrowRight', 'DArrowLeft', 'Download', 'Upload', 'Top', 'Bottom',
      'Back', 'Right', 'TopRight', 'TopLeft', 'BottomRight', 'BottomLeft', 'Sort',
      'SortUp', 'SortDown', 'Rank', 'CaretLeft', 'CaretTop', 'CaretRight', 'CaretBottom', 'DCaret', 'Expand', 'Fold']
  },
  {
    label: '其他',
    icons: ['Location', 'LocationInformation', 'DeleteLocation', 'Coordinate', 'Bicycle', 'OfficeBuilding', 'School',
      'Guide', 'AddLocation', 'MapLocation', 'Place', 'LocationFilled', 'Van', 'Sunrise', 'Sunny', 'Ship', 'MostlyCloudy',
      'PartlyCloudy', 'Sunset', 'Drizzling', 'Pouring', 'Cloudy', 'Moon', 'MoonNight', 'Lightning', 'WindPower', 'ChromeFilled']
  }
]

const setIcon = (item) => {
  emit('selectIcon', item)
  visible.value = !visible.value
}
</script>

<style scoped>
.el-icon {
  margin: 2px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #dedfe0;
}
.el-icon:hover {
  background: #dedfe0;
}
.star-icon-select {
  background: #409EFF;
  color: white;
}
</style>
